<script setup lang="ts">
import { useCounterStore } from '@/store/counter'
import { onMounted, reactive } from 'vue';
import { NButton } from 'naive-ui'

import { useRouter } from 'vue-router';

const router = useRouter()

const counter = useCounterStore()
interface PersonInfo {
    id: number;
    name: string;
    age: number;
}
interface DataProps<T> {
    tableData: T[]
}
const data: DataProps<PersonInfo> = reactive({
    tableData: []
});
const add = () => {
    counter.increment()
    console.log(counter.count);
}
const getData = async () => {
    const res: any = await counter.getData()
    data.tableData = res
}
onMounted(() => {
    getData()
    console.log('reactive>>>>>', data.tableData);
})
const handleIntoPdfView = () => {
    router.push('PdfView');
}
</script>

<template>
    <div >
        <NButton @click="add" color="#8a2be2">add</NButton>
        <NButton @click="handleIntoPdfView" color="#8a2be2">PdfView</NButton>
        <div v-for="item in data.tableData" :key="item?.id">{{item.name}}</div>
    </div> 
</template>

<style scoped>
</style>
